<template>
  <div style="border: 1px solid #E8E8E8;border-radius: 5px;padding: 15px">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
        </a-row>
      </a-form>
    </div>
    <div class="table-operator">
      <a-button @click="addDeposit(1)" v-has="'customer:addContract'" type="primary" icon="plus">新增线上合同</a-button>
      <a-button @click="addDeposit(2)" v-has="'customer:addContract'" type="primary" icon="plus">新增线下合同</a-button>
    </div>
    <div>
      <!-- <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <span slot="payVoucher" slot-scope="text,record">
          <a v-if="text != null" @click="downloadFile(record)">预览</a>
          <span v-if="text==null">无</span>
        </span>

        <span slot="action" slot-scope="text, record">
           <a-popconfirm v-if="record.status === 2 && record.isSign === 0" v-has="'customer:contractSign'"
                         title="确定给当前客户发送电子合同吗？" @confirm="() => handleSign(record)">
             <a>发起签署</a>
           </a-popconfirm>
           <a-popconfirm v-show="record.status === 0 && record.onlineOrOffline === 1" v-has="'customer:contractApproval'"
                         title="确定发起审批吗?" @confirm="() => initiateApproval(record)">
             <a>发起审批</a>
           </a-popconfirm>
          <a-divider type="vertical" v-show="(record.status === 0 && record.onlineOrOffline === 1) || (record.status === 2 && record.isSign === 0)"/>
          <a @click="uploadRemitScrip(record)" v-has="'customer:contractUploadRemitScrip'" v-if="record.isSign === 2 && (record.payVoucher == null || record.payVoucher === '')">上传付款凭证</a>
          <a-divider type="vertical" v-has="'customer:contractDel'" v-if="record.isSign === 2 && (record.payVoucher == null || record.payVoucher === '')"/>
          <a-popconfirm  title="确定删除吗?" v-has="'customer:contractDel'" v-show="record.status === 0 || record.isSign === 0" @confirm="() => handleDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </span>
      </a-table> -->
      <div style="height:80vh;overflow-y:scroll;">
        <van-list
          v-model="loading"
          :finished="finished"
          offset="30"
          finished-text="没有更多了"
          @load="downLoadData"
          :immediate-check="false">
          <van-collapse v-model="activeName" accordion>
            <van-collapse-item 
              :title="item.name" 
              :name="i"
              v-for="(item,i) in dataSource"
              :key="i">
              <div class="list">
                <div>客户姓名：{{ item.name }}</div>
                <div>项目地址：{{ item.address }}</div>
                <div>合同金额：{{item.money}}</div>
                <div>签约时间：{{item.decidesTime}}</div>
                <div>审批状态：{{examineStatus[item.status]}}</div>
                <div>是否签字：{{signStatus[item.isSign]}}</div>
                <div>付款状态：{{payList[item.payStatus]}}</div>
                <div>合同类型：{{item.onlineOrOffline==1?'线上合同':'线下合同'}}</div>
                <div>经办人：{{item.createBy}}</div>
                <div>操作：
                  <a-popconfirm v-if="item.status === 2 && item.isSign === 0" v-has="'customer:contractSign'"
                         title="确定给当前客户发送电子合同吗？" @confirm="() => handleSign(item)">
                    <a>发起签署</a>
                  </a-popconfirm>
                  <a-popconfirm v-show="item.status === 0 && item.onlineOrOffline === 1" v-has="'customer:contractApproval'"
                                title="确定发起审批吗?" @confirm="() => initiateApproval(item)">
                    <a>发起审批</a>
                  </a-popconfirm>
                  <a-divider type="vertical" v-show="(item.status === 0 && item.onlineOrOffline === 1) || (item.status === 2 && item.isSign === 0)"/>
                  <a @click="uploadRemitScrip(item)" v-has="'customer:contractUploadRemitScrip'" v-if="item.isSign === 2 && (item.payVoucher == null || item.payVoucher === '')">上传付款凭证</a>
                  <a-divider type="vertical" v-has="'customer:contractDel'" v-if="item.isSign === 2 && (item.payVoucher == null || item.payVoucher === '')"/>
                  <a-popconfirm  title="确定删除吗?" v-has="'customer:contractDel'" v-show="item.status === 0 || item.isSign === 0" @confirm="() => handleDelete(item.id)">
                    <a>删除</a>
                  </a-popconfirm>
                </div>
              </div>
            
            </van-collapse-item>
          </van-collapse>
        </van-list>
      </div>
    </div>
    <add-customer-contract-modal ref="addCustomerContractModal" @ok="modalOk"></add-customer-contract-modal>
    <depositPaySign ref="depositPaySign" @ok="modalFormOk"></depositPaySign>
    <upload-remit-scrip-modal ref="uploadRemitScripModal" @ok="modalOk"></upload-remit-scrip-modal>
  </div>
</template>
<script>
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import addCustomerContractModal from "./modules/addCustomerContractModal";
import depositPaySign from './modules/depositPaySign'
import { getAction, postAction, putAction } from "../../../../../api/manage";
import {filterDictTextByCache} from '@comp/dict/JDictSelectUtil'
import uploadRemitScripModal from "./modules/uploadRemitScripModal";

export default {
  name: 'GhDepositPayList',
  mixins:[JeecgListMixin, mixinDevice],
  components: {
    addCustomerContractModal,
    depositPaySign,
    uploadRemitScripModal
  },
  props: {
    customerId: {
      required: true,
      default: 0
    },
  },
  data () {
    return {
      activeName:'',
      finished: false,
      loading: false,
      dataSource: [],
      customerInfo: {
        customerId: '',
        name: '',
        phone: '',
        address: ''
      },
      description: '客户合同管理页面',
      examineStatus: ['草稿','待审批','审批通过','审批不通过'],
      signStatus: ['未签字','签署中','签署完成'],
      payList:['待付款','已付款'],
      columns: [
        {
          title: '#',
          dataIndex: '',
          key:'rowIndex',
          width:60,
          align:"center",
          customRender:function (t,r,index) {
            return parseInt(index)+1;
          }
        },
        {
          title:'客户姓名',
          align:"center",
          dataIndex: 'name'
        },
        {
          title:'项目地址',
          align:"center",
          dataIndex: 'address'
        },
        {
          title:'合同金额',
          align:"center",
          dataIndex: 'money'
        },
        {
          title:'签约时间',
          align:"center",
          dataIndex: 'decidesTime',
          customRender:function (text) {
            return !text?"":(text.length>10?text.substr(0,10):text)
          }
        },
        /*{
          title:'电子合同',
          align:"center",
          dataIndex: 'agreementUrl',
          customRender:function (text) {
            if(text===null){
              return "未签署";
            }else{
              return "下载";
            }
          }
        },*/
        {
          title:'审批状态',
          align:"center",
          dataIndex: 'status',
          customRender:function (text,record) {
            if (record.onlineOrOffline == 1){
              if(text===0){
                return <a-tag>草稿</a-tag>
              }else if(text===1){
                return <a-tag color="orange">待审批</a-tag>
              }else if(text===2){
                return <a-tag color="green">审批通过</a-tag>
              }else if(text===3){
                return <a-tag color="red">审批不通过</a-tag>
              } else {
                return <a-tag>text</a-tag>;
              }
            }
          }
        },
        {
          title:'是否签字',
          align:"center",
          dataIndex: 'isSign',
          customRender:function (text,record) {
            if (record.onlineOrOffline == 1){
              if(text === 0){
                return <a-tag color="red">未签字</a-tag>
              }else if(text === 1){
                return <a-tag color="orange">签署中</a-tag>
              }else if (text === 2){
                return <a-tag color="green">签署完成</a-tag>
              }
            }
          }
        },
        {
          title:'付款状态',
          align:"center",
          dataIndex: 'payStatus',
          customRender:function (text) {
            if (text === 0) {
              return <a-tag color="orange">待付款</a-tag>
            } else if (text === 1) {
              return <a-tag color="green">已付款</a-tag>
            } else {
              return <a-tag>text</a-tag>
            }
          }
        },
        {
          title:'付款凭证',
          align:"center",
          dataIndex: 'payVoucher',
          slots: { title: 'customTitle' },
          scopedSlots: { customRender: 'payVoucher' },
        },
        {
          title:'合同类型',
          align:"center",
          dataIndex: 'onlineOrOffline',
          customRender:function (text) {
            if (text == 1){
              return "线上合同"
            }else {
              return "线下合同"
            }
          }
        },
        {
          title:'经办人',
          align:"center",
          dataIndex: 'createBy'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align:"center",
          fixed:"right",
          width:167,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: "/ghDepositPay/list",
        delete: "/ghDepositPay/delete",
        deleteBatch: "/ghDepositPay/deleteBatch",
        exportXlsUrl: "/ghDepositPay/exportXls",
        importExcelUrl: "ghDepositPay/importExcel",
        edit: "/ghDepositPay/edit",
        signDeposit: "ghDepositPay/signDeposit",
      },
      dictOptions:{},
      superFieldList:[],
    }
  },
  created() {
    this.loadData();
  },
  computed: {

  },
  methods: {
    downLoadData(){
      this.ipagination.current++;
      this.finished = false
      this.loadData()
    },
    uploadRemitScrip(record){
      if (record.status === 2){
        if (record.isSign === 2){
          this.$refs.uploadRemitScripModal.title = "上传付款凭证"
          this.$refs.uploadRemitScripModal.edit(record)
        }else {
          this.$message.warning("当前合同未签字，暂不能上传凭证")
        }
      } else if(record.status === 1){
        this.$message.warning("当前合同正在审批，暂不能上传凭证")
      } else if (record.status === 0){
        this.$message.warning("当前合同未审批，暂不能上传凭证")
      }
    },
    modalOk(){
      this.loadData()
    },
    //新增合同签署记录
    addDeposit(value) {
      this.$refs.addCustomerContractModal.onLineOrOffLine = value
      this.$refs.addCustomerContractModal.model = {};
      this.$refs.addCustomerContractModal.add(this.customerId);
      this.$refs.addCustomerContractModal.title = "新增";
    },
    initiateApproval(obj){
      obj.status = 1;
      putAction(this.url.edit,obj).then((res)=>{
        if(res.success){
          this.$message.success(res.message);
          this.loadData();
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    //进行签署
    handleSign(obj) {
      let params = {};
      params.id = obj.id;
      params.customerId = obj.customerId;
      params.cardNo = obj.cardNo;
      params.phone = obj.phone;
      params.name = obj.name;
      params.address = obj.address;
      params.decidesTime = obj.decidesTime;
      params.money = obj.money;
      params.contractType = obj.contractType;
      params.houseTypeName = this.getHouseTypeDictValue(obj.houseType);
      params.houseArea = obj.houseArea;
      params.commencementDate = obj.commencementDate;
      params.CompletionDate = obj.CompletionDate;
      this.loading = true;
      postAction(this.url.signDeposit,params).then((res)=>{
        if(res.success){
          this.$message.success(res.message);
          this.loadData();
        } else{
          this.$message.warning(res.message);
        }
      }).finally(() => {
        this.loading = false;
      })
    },
    //获取房屋户型字典数据
    getHouseTypeDictValue(value){
      return filterDictTextByCache('customer_info_house_type', value);
    },
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error("请设置url.list属性!")
        return
      }
      if (arg === 1) {
        this.dataSource = []
        this.ipagination.current = 1;
      }
      let params = this.getQueryParams();//查询条件
      let that = this;
      this.loading = true;
      params.customerId = this.customerId;
      params.contractType = 2;
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          let list = res.result.records || res.result;
          this.dataSource = [...this.dataSource, ...list]
          if (this.dataSource.forEach(function (item) {
            if (item.isSign === 2){
              that.$router.push({ path: "/infoTab", query: {id: item.customerId, name: item.name, key: "7"}});
            }
          }))
          this.ipagination.total = res.result.total;
        } else {
          this.$message.warning(res.message)
        }

        this.loading = false
        if(res.result.records.length<10){
          this.finished = true;
        }
      }).finally(() => {
        this.loading = false
      })
    },
    downloadFile(record){
      window.open(record.payVoucher)
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
.list{
  line-height: 40px;
  border-top: 1px solid #f6f6f6;
  font-size: 12px;
 
}

</style>